<template>
  <div class="page-container">
    <div class="points-header">
      <div class="points-text">
        我的积分：<span class="points-value">{{ info.points }}</span>
      </div>
      <div class="points-buttons">
        <div style="margin-top: 0rpx">
          <button size="mini" type="primary" @click="gotoMingxi">明细</button>
        </div>

        <div style="margin-top: 12rpx">
          <button type="warn" size="mini" @click="goToWithDrawal">提现</button>
        </div>
      </div>
    </div>

    <div class="shop-container" v-if="false">
      <div class="shop-card">
        <image
          src="https://img2.huashi6.com/images/resource/thumbnail/2023/07/23/193722_24254930385.jpg?imageMogr2/quality/100/interlace/1/thumbnail/2000x%3E"
          class="product-image"
        />

        <div class="product-title">医用外科一次性防护口罩100只</div>

        <div class="product-footer">
          <div class="product-price">50 积分</div>
          <button type="error" size="small">立即兑换</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { info } from '@/api/user';
import { getPointInfo } from '@/api/index';
export default {
  data() {
    return {
      info: {},
    };
  },

  async onShow() {
    const _res = await getPointInfo();

    console.log('_res_res_res=>', _res);

    this.info = _res?.data?.info
  },

  methods: {
    goToWithDrawal() {
      uni.navigateTo({
        url: '/pages/me/myPoints/withdrawal',
      });
    },
    // 跳到明细
    gotoMingxi() {
      uni.navigateTo({
        url: '/pages/me/myPoints/details',
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-container {
  background-color: rgba(243, 243, 243, 1);
  min-height: 100vh;
  padding: 30rpx;
}

.points-header {
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // width: calc(100% - 60rpx);
  padding: 30rpx;
}

.points-text {
  font-size: 40rpx;
  color: #333333;
  flex: 1;
}

.points-value {
  color: #63a7f6;
}

.points-buttons {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  width: 160rpx;
}

.shop-container {
  margin-top: 48rpx;
}

.shop-card {
  border-radius: 20rpx;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(51, 51, 51, 1);
  font-size: 26rpx;
  font-family: -regular;
  border: 0rpx solid rgba(121, 121, 121, 1);
  padding: 30rpx;
}

.product-image {
  width: 100%;
  height: 410rpx;
}

.product-title {
  color: #333333;
  font-size: 40rpx;
  margin-top: 12rpx;
}

.product-footer {
  display: flex;
  justify-content: space-between;
  font-size: 42rpx;
  align-items: center;
  margin-top: 12rpx;
}

.product-price {
  color: #d9001b;
}

.mt-12rpx {
  margin-top: 12rpx;
}
</style>
